<template>
    <view class="work-container">
        <uni-header :title="'主题详情'"></uni-header>
        <view class="content" v-if="details.theme">
            <view class="topic">
                <view class="title">
                    {{details.theme.name}}
                    <text class="text" @click="shareClick"><uni-icons type="redo-filled" color="#999" size="18"></uni-icons>分享</text>
                </view>
                <view class="time">{{details.theme.create_time}} <text class="topic-name">{{details.theme.title}}</text></view>
            </view>
            <view class="detalis">
                <view class="card-head">
                    <u--image :src="imgUrl+details.theme.accessory" width="50px" height="50px" shape="circle"></u--image>
                    <text class="name">{{details.theme.userName}}</text>
                </view>
                <view class="card-body">{{details.theme.content}}</view>
                <view class="card-foot">
                    <view class="left">全部评论数量 {{details.theme.review_num}}</view>
                    <view class="right">
                        <u-icon name="thumb-up" size="20"></u-icon>{{details.theme.like_num}}
                        <u-icon name="star" size="20"></u-icon>{{details.theme.collect_num}}
                        <u-icon name="chat" size="20"></u-icon>{{details.theme.review_num}}
                    </view>
                </view>
            </view>
            <view class="review">
                <view class="review-list" v-for="item in details.records">
                    <view class="review-head">
                        <u--image :src="imgUrl+item.icon" width="30px" height="30px" shape="circle"></u--image>
                        <view class="name-info">
                            <view class="name">{{item.userName}}</view>
                            <view class="time">{{item.create_time}}</view>
                        </view>
                    </view>
                    <view class="review-body">{{item.content}}</view>
                    <view class="review-foot">
                        <view class="time">{{item.create_time}}发布</view>
                        <view class="right">
                            <uni-icons @click="saveReplyLikeClick(item)" type="hand-up" size="25" v-if="item.is_reply_like == '0'"></uni-icons>
                            <uni-icons @click="saveReplyLikeClick(item)" type="hand-up-filled" size="25" v-else color="#0866f1"></uni-icons>
                            {{item.like_num}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="footer">
            <u--input placeholder="请输入内容" @focus="inputDialogToggle" border="surround" clearable></u--input>
            <uni-icons @click="saveLikeThemeClick" type="hand-up" size="25" v-if="details.is_like == '0'"></uni-icons>
            <uni-icons @click="saveLikeThemeClick" type="hand-up-filled" size="25" v-else color="#0866f1"></uni-icons>
            <uni-icons @click="saveCollectThemeClick" type="star" size="25" v-if="details.is_collect == '0'"></uni-icons>
            <uni-icons @click="saveCollectThemeClick" type="star-filled" size="25" v-else color="#0866f1"></uni-icons>
        </view>
        <uni-popup ref="inputDialog" type="dialog">
            <uni-popup-dialog ref="inputClose" mode="input" title="评论内容" value=""
                              placeholder="请输入评论内容" @confirm="saveReplyData"></uni-popup-dialog>
        </uni-popup>
        <uni-popup ref="share" type="dialog" backgroundColor="#fff">
            <uni-popup-dialog ref="shareClose" title="请选择分享的圈子" @confirm="shareSubmit">
                <uni-data-checkbox v-model="shareId" :localdata="circleData"></uni-data-checkbox>
            </uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
    import config from '@/config'
    import { getThemeInfo, saveReply, saveLikeTheme, saveCollectTheme, saveReplyLike, shareTheme, getCircle } from "@/api/work"
    export default {
        data() {
            return {
                imgUrl: config.imgUrl,
                src: 'https://cdn.uviewui.com/uview/album/1.jpg',
                details: {},
                themeId:"",
                deviceId: this.$store.state.user.deviceId,
                circleData:[],
                shareId:""
            }
        },
        onLoad(option){
            this.themeId = option.themeId
            this.getThemeData(option.themeId)
        },
        methods: {
            getThemeData(id){
                getThemeInfo({themeId:id,deviceId: this.$store.state.user.deviceId}).then(res=>{
                    this.details = res
                })
            },
            inputDialogToggle() {
                this.$refs.inputDialog.open()
            },
            saveReplyData(val){
                saveReply({themeId:this.themeId,content:val,deviceId:this.deviceId}).then(res=>{
                    if(res.status == 0){
                        uni.$u.toast('评论成功');
                        this.getThemeData(this.themeId)
                    }
                })
            },
            saveLikeThemeClick(){
                let params={
                    themeId:this.themeId,
                    doLike:this.details.is_like=="0"?"1":"0",
                    deviceId: this.$store.state.user.deviceId
                }
                saveLikeTheme(params).then(res=>{
                    if(res.status == "0"){
                        this.getThemeData(this.themeId)
                    }
                })
            },
            saveCollectThemeClick(){
                let params={
                    themeId:this.themeId,
                    doCollect:this.details.is_collect=="0"?"1":"0",
                    deviceId: this.$store.state.user.deviceId
                }
                saveCollectTheme(params).then(res=>{
                    if(res.status == "0"){
                        this.getThemeData(this.themeId)
                    }
                })
            },
            saveReplyLikeClick(data){
                let params={
                    replyId:data.id,
                    doLike:data.is_reply_like=="0"?"1":"0",
                    deviceId: this.$store.state.user.deviceId
                }
                saveReplyLike(params).then(res=>{
                    if(res.status == "0"){
                        this.getThemeData(this.themeId)
                    }
                })
            },
            shareClick(){
                this.circleData=[];
                getCircle({deviceId: this.$store.state.user.deviceId}).then(res=>{
                    res.list.forEach(item=>{
                        this.circleData.push({value:item.id,text:item.title})
                    });
                    this.$refs.share.open()
                })
            },
            shareSubmit(){
                shareTheme({themeId:this.themeId,circleId:this.shareId,deviceId:this.deviceId}).then(res=>{
                    uni.$u.toast('分享成功');
                })
            }

        }
    }
</script>

<style lang="scss">
    page{
        background: #fff;
        .content{
            padding: 0 15px;
            background: #fff;
            .topic{
                border-bottom: 1px solid #eee;
                padding: 10px 0;
                .title{
                    font-size: 22px;
                    color:#2f2f2f;
                    display: flex;
                    justify-content: space-between;
                    .text{
                        font-size: 14px;
                        color:#999;
                    }
                }
                .time{
                    font-size: 14px;
                    color:#999;
                    margin-top: 10px;
                    .topic-name{
                        margin-left: 15px;
                    }
                }
            }
            .detalis{
                border-bottom:1px solid #eee;
                padding-bottom: 15px;
                .card-head{
                    display: flex;
                    align-items: center;
                    padding: 10px 0;
                    .name{
                        margin-left: 15px;
                        font-size: 18px;
                        color:#2c2c2c;
                    }
                }
                .card-body{
                    font-size: 22px;
                    color:#999;
                    padding: 10px 0;
                }
                .card-foot{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .left{
                        font-size: 14px;
                        color:#666;
                    }
                    .right{
                        display: flex;
                        align-items: center;
                        font-size: 15px;
                        color:#666;
                    }
                }
            }
            .review{
                .review-list{
                    padding: 15px 0 5px;
                    border-bottom: 1px solid #eee;
                    .review-head{
                        display: flex;
                        align-items: center;
                        .name-info{
                            margin-left: 15px;
                            .name{
                                font-size: 18px;
                                color:#999;
                            }
                            .time{
                                font-size: 14px;
                                color:#999;
                                margin-top: 5px;
                            }
                        }
                    }
                    .review-body{
                        margin: 10px 0;
                        font-size: 16px;
                        color:#333;
                    }
                    .review-foot{
                        display: flex;
                        justify-content: space-between;
                        .time{
                            color:#999;
                        }
                        .right{
                            display: flex;
                            align-items: center;
                            color:#666;
                        }
                    }
                }
            }
        }
        .footer{
            padding: 15px;
            background: #fff;
            display: flex;
            align-items: center;
            position: fixed;
            bottom: 0;
            width: 100%;
            border-top: 1px solid #eee;
        }
    }
</style>
